{extend name="common/header" /}

{block name='body_before'}
<link rel="stylesheet" type="text/css" href="/assets/css/swiper-bundle.min.css"/>
<link rel="stylesheet" type="text/css" href="/assets/css/video.css?{:rand(1,99999)}"/>
<!--<link rel="stylesheet" type="text/css" href="/assets/css/video-dark.css?{:rand(1,99999)}"/>-->
<script type="text/javascript" src="/assets/libs/jquery/dist/jquery.js"></script>
<script src="/assets/js/lazyload.js"></script>
<script>
    $(() => {
        lazyload();
    });
</script>
{/block}
{block name='body'}
<div class="body">
    <div class="menus menus-active">
        <a title="{:config('site.title')}" class="banner" href="/">
            <img src="{:config('site.site_icon')}">
            <span>{:config('site.name')}</span>
        </a>
        <ul class="">
            {foreach $category as $item}
            <li class="menus-item {if $selected_category_id==$item['id']} menus-item-active {/if}">
                <a title="{$item['title']}" href="?selected_category_id={$item['id']}">{$item['title']}</a>
            </li>
            {/foreach}
        </ul>
    </div>
    <div class="content">
        <div class="content-header">
            <form method="get" action="{:url('filter')}" class="content-header-search-item">
                <i class="fa-search fa search-icon"></i>
                <input placeholder="搜索" name="keyword" class="content-header-search-input"/>
            </form>

            <div class="content-header-tools">
                <i class="fa fa-snapchat"></i>
            </div>
        </div>
        <div class="content-body">
            <div class="swiper">
                <div class="swiper-wrapper">
                    {foreach $swiper_list as $item}
                    <div class="swiper-slide">
                        <img title="{:config('site.title')}" class="lazyload" data-src="{$item['thumb']}"/>
                    </div>
                    {/foreach}
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <div class="content-body-tips">
                <div class="content-body-tips-left">
                    <span>最新上线</span>
                </div>
                <div class="content-body-tips-right">
                    <a {:new_tab_open()} title="更多内容" class="more" href="{:url('filter')}?category_id={$selected_category_id}">
                        <span>更多</span>
                        <i class="fa fa-angle-right"></i>
                    </a>
                </div>
            </div>
            <div class="content-body-video-list">
                {foreach $news_video_list as $item}
                <a {:new_tab_open()} href="{:url('detail',array('id'=>$item['id']))}">
                    <div class="content-body-video-item-padding">
                        <div class="content-body-video-item">
                            <div class="content-body-video-item-img">
                                <img title="{$item['title']}" class="lazyload" data-src="{$item['thumb']}"/>
                            </div>
                            <div class="content-body-video-title">
                                <h1>{$item['title']}</h1>
                            </div>
                            <div class="content-body-video-intro">
                                {$item['desc']}
                            </div>
                        </div>
                    </div>
                </a>
                {/foreach}
            </div>

            <div class="content-body-tips">
                <div class="content-body-tips-left">
                    <span>最热门</span>
                </div>
                <div class="content-body-tips-right">
                    <a {:new_tab_open()} title="更多内容" class="more" href="{:url('filter')}?category_id={$selected_category_id}">
                        <span>更多</span>
                        <i class="fa fa-angle-right"></i>
                    </a>
                </div>
            </div>
            <div class="content-body-video-list">
                {foreach $hot_video_list as $item}
                <a {:new_tab_open()} href="{:url('detail',array('id'=>$item['id']))}">
                    <div class="content-body-video-item-padding">
                        <div class="content-body-video-item">
                            <div class="content-body-video-item-img">
                                <img title="{$item['title']}" class="lazyload" data-src="{$item['thumb']}"/>
                            </div>
                            <div class="content-body-video-title">
                                <h1>{$item['title']}</h1>
                            </div>
                            <div class="content-body-video-intro">
                                {$item['desc']}
                            </div>
                        </div>
                    </div>
                </a>
                {/foreach}
            </div>
        </div>
    </div>
</div>
{/block}
{block name='script'}
<script type="text/javascript" src="/assets/js/frontend/swiper-bundle.min.js"></script>
<script>
    new Swiper('.swiper', {
        direction: 'vertical',
        loop: true,
        pagination: {
            el: '.swiper-pagination',
        },
    })
</script>
{/block}